/**
 * desc: tab and pane
 * author: Joe
 * date: 7/30/2018
 */

coreModule.directive('ndTab', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    controller: [
      '$scope', function($scope) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(p) {
            p.selected = false;
          });
          pane.selected = true;
        };

        this.addPane = function(pane) {
          if (panes.length === 0) {
            $scope.select(pane);
          }
          panes.push(pane);
        };
      }],
    template:
      '<div class="nd-tab">' +
      '  <ul class="nav nav-tabs">' +
      '    <li ng-repeat="pane in panes" ng-class="{active:pane.selected}">' +
      '      <a href="" ng-click="select(pane)">{{pane.title}}</a>' +
      '    </li>' +
      '  </ul>' +
      '  <div class="tab-content" ng-transclude></div>' +
      '</div>',
  };
});

coreModule.directive('ndPane', function() {
  return {
    require: '^^ndTab',
    restrict: 'E',
    transclude: true,
    scope: {
      title: '@',
    },
    link: function(scope, ele, attrs, tabCtrl) {
      tabCtrl.addPane(scope);
    },
    template:
      '<div class="tab-pane" ng-show="selected">' +
      '  <h4>{{title}}</h4>' +
      '  <div ng-transclude></div>' +
      '</div>',
  };
});
